<template>
  <view class="relayTheMessage">
    <h4 style="padding-left: 10rpx;">群组文件</h4>
    <view class="file-list">
      <scroll-view v-if="fileList.length > 0" :scroll-top="scrollTop" :refresher-background="'transparent'"
        class="Contact-menu" :style="tabsDynamicHeight" scroll-y="true" :refresher-enabled="true"
        :refresher-triggered="isRefreshing" @refresherrefresh="onRefresh" @scrolltolower="loadMore">
        <view class="file-item" v-for="(file, index) in fileList" :key="index" @click="handleFileClick(file)">
          <!-- 文件图标 -->
          <view class="file-icon">
            <u-icon :name="getFileIcon(file.type)" size="40rpx" color="#2979ff"></u-icon>
          </view>

          <!-- 文件信息 -->
          <view class="file-info">
            <view class="file-name">{{ file.name }}</view>
            <view class="file-meta">
              <text class="file-type">{{ file.type }}</text>
            </view>
            <view style="height: 1px;margin-top: 10rpx;">
              <up-line></up-line>
            </view>
          </view>

          <!-- 右侧箭头 -->
          <view class="file-arrow">
            <u-icon name="more-dot-fill" size="28rpx" color="#ccc"></u-icon>
          </view>
        </view>
        <!-- 加载中提示 -->
        <view v-if="loading" class="loading-text">加载中...</view>
        <!-- 没有更多数据提示 -->
        <view v-if="noMore" class="no-more-text">没有更多数据了...</view>
      </scroll-view>
      <view v-else class="no-more-text">
        <image :style="{ width: iconSize, height: iconSize }" src="@/static/ocumentManagement/zanwu.png">
        </image>
        <view>
          暂无我的文件
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'allFiles',
  props: {
    tabsDynamicHeight: {
      type: Object,
      default: {}
    },
  },
  data () {
    return {
      fileList: [
        // { name: '项目计划书.docx', type: '文档', updateTime: '2023-10-10 14:30', size: '2.4MB' },
      ],
      scrollTop: 0,
      timer: null, // 用来做防抖
      pageSize: 20, // 每页数据条数
      pageNum: 1, // 默认页码
      total: 0, // 通讯录数据总条数
      isRefreshing: false, // 是否正在下拉刷新
      loading: false, // 是否正在加载中
      noMore: false, // 是否已加载全部数据
      iconSize: '200px', // 控制图标大小 
    }
  },
  created () {
    this.getList();
  },
  methods: {
    // 根据文件类型返回对应图标
    getFileIcon (type) {
      const map = {
        '文档': 'file-text',
        '图片': 'photo',
        '表格': 'grid',
        '演示': 'folder'
      }
      return map[type]
    },
    // 文件点击事件
    handleFileClick (file) {
      console.log('点击了文件：', file)
    },
    // 刷新
    onRefresh () {
      console.log('刷新');
      this.isRefreshing = true; // 开始刷新
      this.fileList = [];
      this.pageNum = 1;
      this.noMore = false;
      this.getList();
    },
    // 上拉加载
    loadMore () {
      console.log('上拉加载');
      if (this.loading || this.noMore) return;
      this.pageNum++;
      this.getList();
    },
    async getList () {
      // 如果正在加载就不再发起请求
      if (this.loading) {
        uni.hideLoading();
        return;
      }
      this.loading = true;

      if (this.pageNum === 1) {
        this.noMore = false;
      }

      try {
        uni.showLoading({
          title: '加载中'
        });

        const res = await new Promise((resolve) => {
          this.isRefreshing = false;
          this.loading = false;
          uni.hideLoading();
          // setTimeout(() => {
          //   const total = 35; // 模拟总数据量
          //   const start = (this.pageNum - 1) * this.pageSize;
          //   const end = Math.min(start + this.pageSize, total);

          //   // 模拟返回的数据结构
          //   resolve({
          //     status: 1,
          //     data: Array.from({ length: end - start }, (_, i) => ({
          //       name: `文件_${start + i + 1}.docx`,
          //       type: ['文档', '图片', '表格', '演示'][Math.floor(Math.random() * 4)],
          //       updateTime: '2025-10-10 10:00',
          //       size: `${(Math.random() * 10).toFixed(1)}MB`
          //     })),
          //     total
          //   });
          // }, 1000); // 模拟网络延迟
        });

        if (res.status === 1) {
          this.fileList = this.pageNum === 1 ? res.data : [...this.fileList, ...res.data];
          this.total = res.total;

          if (this.fileList.length >= this.total) {
            this.noMore = true;
          }

          this.isRefreshing = false;
          this.loading = false;
          uni.hideLoading();
        } else {
          this.errLoading = true;
          this.loading = false;
          this.noMore = false;
          this.isRefreshing = false;
          uni.hideLoading();
        }
      } catch (error) {
        this.errLoading = true;
        uni.hideLoading();
        this.loading = false;
        this.isRefreshing = false;
        uni.showToast({
          title: '请求失败',
          icon: 'error'
        });
      } finally {

      }


      // if (this.loading) {
      //   uni.hideLoading();
      //   return
      // }
      // this.loading = true;

      // if (this.pageNum === 1) {
      //   this.noMore = false;
      // }
      // try {
      //   uni.showLoading({
      //     title: '加载中'
      //   });

      //   const res = await apply.ApplygetRecentChat(data);

      //   if (res.status === 1) {
      //     this.RecentChatList = this.pageNum === 1 ? res.data : [...this.RecentChatList, ...res.data];
      //     this.total = res.total;
      //     if (this.RecentChatList.length >= this.total) {
      //       this.noMore = true;
      //     }
      //     this.isRefreshing = false;
      //     this.loading = false;
      //     uni.hideLoading();
      //   } else {
      //     this.errLoading = true
      //     this.loading = false;
      //     this.noMore = false;
      //     this.isRefreshing = false;
      //     uni.hideLoading();
      //   }
      // } catch (error) {
      //   this.errLoading = true
      //   uni.hideLoading();
      //   this.loading = false;
      //   this.isRefreshing = false;
      //   uni.showToast({
      //     title: '请求失败',
      //     icon: 'error'
      //   });
      // }
    }
  }
}
</script>

<style lang="scss" scoped>
.relayTheMessage {
  overflow: hidden;

  .file-list {
    padding-left: 10rpx;
    padding-right: 10rpx;
    display: flex;
    flex-direction: column;
    gap: 10rpx;

    .Contact-menu {
      .file-item {
        display: flex;
        align-items: center;
        padding: 20rpx;
      }

      .file-icon {
        margin-bottom: 14rpx;
        width: 60rpx;
        height: 60rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 15rpx;
      }

      .file-info {
        flex: 1;
        min-width: 0; // 解决文字过长溢出问题
      }

      .file-name {
        font-size: 28rpx;
        color: #333;
        margin-bottom: 5rpx;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .file-meta {
        display: flex;
        justify-content: space-between;
        font-size: 22rpx;
        color: #999;
      }

      .file-arrow {
        width: 50rpx;
        height: 50rpx;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }

  /* 加载中和无更多数据提示 */
  .loading-text,
  .no-more-text {
    margin-top: 20rpx;
    text-align: center;
    padding: 20rpx;
    color: #999;
    font-size: 28rpx;
  }
}
</style>